<template>
  <div class="page-cart">
    <el-row>
      <el-col v-if="this.cart" :span="24" class="m-cart">
        <list :cart-data="this.cart" :is-login="this.isLogin" :user-id="this.userId" />
        <p>
          应付金额：
          <em class="money">￥{{total}}</em>
        </p>
        <div class="post">
          <el-button type="primary" @click="submit">提交订单</el-button>
        </div>
      </el-col>
      <el-col v-else class="empty">购物车为空</el-col>
    </el-row>
    <el-dialog title="提示" :visible.sync="isSubmit" width="30%" center>
      <span>您尚未登陆，请在登陆后进行提交订单操作</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isSubmit = false">取 消</el-button>
        <el-button type="primary" @click="toLogin()">前往登录</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import List from "@/components/cart/list.vue";
import * as homeApi from "@/server/home.js";
export default {
  layout: "product",
  components: {
    List
  },
  data() {
    return {
      cart: null,
      isLogin: false,
      isSubmit: false,
      order: false,
      userId: 0,
      user: null,
      address: null,
      sum: 0,
      orderData: {
        boxCost: 0,
        sendCost: 0,
        user: {
          id: 0,
          name: "",
          address: "",
          telephone: ""
        },
        foodList: [
          {
            name: "",
            sellPrice: 0,
            amount: 0
          }
        ],
        total: 0
      }
    };
  },
  methods: {
    getCart: function() {
      var userId = localStorage.getItem("user");
      if (userId == null) {
        userId = 0;
      }
      homeApi.getCart(userId).then(result => {
        if (result.data.code == 200) {
          this.userId = userId;
          this.isLogin = true;
        }
        if (result.data.data != null) {
          this.cart = result.data.data;
        }
      });
    },

    submit: function() {
      if (this.isLogin) {
        var userId = localStorage.getItem("user");
        homeApi.getUser(userId).then(result => {
          if (result.data.code == 202) {
            localStorage.removeItem("user");
            this.$message({
              message: result.data.message,
              type: "warning"
            });
            setTimeout(() => {
              this.$router.push("/login");
            }, 1000);
          } else if (result.data.code == 200) {
            this.user = result.data.data;
            this.address = result.data.data.address;
            this.generatebOrder();
          }
        });
      } else {
        this.isSubmit = true;
      }
    },
    generatebOrder: function() {
      homeApi.generatebOrder(this.user, this.cart, this.sum).then(result => {

        if (result.data.code == 200) {
          this.$message({
            duration: 1500,
            message: "提交成功",
            type: "success"
          });
          setTimeout(() => {
            this.$router.push({
              path: "/order?id=" + this.userId
            });
          }, 500);
        }
      });
    },

    toLogin: function() {
      this.isSubmit = false;
      this.$message({
        duration: 1000,
        message: "正在前往登陆页面..."
      });
      console.log("调用了cart.vue里的toLogin()");
      setTimeout(() => {
        this.$router.push("/login");
      }, 1000);
    },

    edit: function() {
      homeApi.editOrderMain(this.orderData).then(result => {
        if (result.data.code == 200) {
          this.orderData = result.data.data;
          this.$message(
            {
              message: "修改成功",
              type: "success"
            },
            1000
          );
        }
      });
    }
  },
  mounted() {
    this.getCart();
  },
  computed: {
    total() {
      let total = 0;
      this.cart.forEach(item => {
        total += item.sellPrice * item.amount;
      });
      this.sum = total;
      console.log(this.sum);
      return parseFloat(total).toFixed(1);
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/cart/index.scss";
.tb-edit .input-box {
  display: none;
}
.tb-edit .current-cell .input-box {
  display: block;
  margin-left: -15px;
}
</style>
